<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>组织机构管理</title>
    <link rel="stylesheet" href="../../../../static/css/element.css" th:href="@{/css/element.css}">
    <link rel="stylesheet" href="../../../../static/css/global.css" th:href="@{/css/global.css}">
    <link rel="stylesheet" href="../../../../static/css/main.css" th:href="@{/css/main.css}">
    <link rel="stylesheet" href="../../../../static/css/myelement.css" th:href="@{/css/myelement.css}"/>

<script src="../../../../static/js/vue.js" th:src="@{/js/vue.js}"></script>
<script src="../../../../static/js/element.js" th:src="@{/js/element.js}"></script>
<script src="../../../../static/js/jquery.min.js" th:src="@{/js/jquery.min.js}"></script>
<script src="../../../../static/js/jquery.nestable.js" th:src="@{/js/jquery.nestable.js}"></script>
</head>
<body>
<div id="app">
    <div class="main-content" v-cloak>
    	<!-- 页面头部 -->
		<div class="page-header">
			<h1 class="page-title">组织机构管理</h1>
			<div class="z-pop_question">
				<el-popover ref="popoverq" placement="bottom-start" width="400"
					trigger="hover">
				<p class="z-jiao">
					设置组织机构划分，比如：华南区 华东区  华北区 </br>
					不同的组织机构，数据权限可能不同
				</p>
				</el-popover>
				<i v-popover:popoverq class="el-icon-question"></i>
			</div>
			<div class="breadcrumb">
				<a href="javascript: top.location.reload();">首页</a><span>/</span>数据<span>
			</div>
		</div>
		<!-- 页面头部 end -->
		 		
 		<div class="list-content">
					<div class="main_cont">
 					<div class="content_item_filter clearfix">
	  	 				<div class="filter-btn">
	  	 					<el-button type="primary" @click="showDailog('','')">新增机构</el-button>
	  	 				</div>
	 				</div>
	 				<div class="drag_tree" >
	 					
					    <div class="cf nestable-lists">
					        <div class="dd" id="nestable">
					            <ol class="dd-list">
					              <li v-for="topDept in topDepts" class="dd-item">
					                   <div class="dd-handle">
						                    <p class="fl" v-cloak>{{ topDept.name }}</p>
					                    </div>
					                    <div class="dd_option fr"><button @click="showDailog(topDept.uuid,topDept.name)">新建子机构</button> <span>|</span> <button @click="editDailog(topDept)">编辑</button> <span>|</span> <button @click="deleteDept(topDept.uuid)">删除</button></div>
								        <ol v-for="firstChilredDept in topDept.childrens"  class="dd-list">
								         <li class="dd-item">
		                                	<div class="dd-handle">
		                                		<p class="fl" v-cloak>{{ firstChilredDept.name }}</p>
		                                	</div>
		                                	<div class="dd_option fr"><button @click="editDailog(firstChilredDept)">编辑</button> <span>|</span> <button @click="deleteDept(firstChilredDept.uuid)">删除</button></div>
		                                   <ol v-for="secendChilredDept in firstChilredDept.childrens"  class="dd-list">
		                                      <li class="dd-item" data-id="6">
					                                <div class="dd-handle">
					                                 <p class="fl" v-cloak>{{ secendChilredDept.name }}</p>
					                                </div>
					                                <div class="dd_option fr"> <button @click="editDailog(secendChilredDept)">编辑</button> <span>|</span> <button @click="deleteDept(secendChilredDept.uuid)">删除</button></div>
					                          </li>
		                                   </ol>
		                                </li>
								        </ol>
								   </li>
					            </ol>
					        </div>
					    </div>
					    <input type="hidden" id="nestable-output" />
					</div>
				</div>
 		</div>	
    </div>
    
    
    <!--新增部门-->
	<el-dialog :title="openText" :visible.sync="dialogFormVisible">
       <el-form ref="organization-form" :model="organization" :rules="rules" label-width="80px" size="small">
           <el-form-item hidden label="ID" prop="uuid">
             <el-input v-model="organization.uuid"></el-input>
         </el-form-item>
         <el-form-item hidden label="parentId" prop="parentId">
             <el-input v-model="organization.parentId"></el-input>
         </el-form-item>
         <el-form-item label="机构名称" prop="name">
            <el-input v-model="organization.name" ></el-input>
         </el-form-item>
         <el-form-item label="上级机构">
	          <el-select v-model="parentOrganizationName" placeholder="请选择上级机构">
	            <el-option v-for="topDept in topDepts" :key="topDept.uuid" :label="topDept.name" :value="topDept.uuid"></el-option>
	          </el-select>
	     </el-form-item>
	      <el-form-item label="描述" prop="description">
            <el-input type="textarea" v-model="organization.description" ></el-input>
         </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" id="addDialog" style="display:none">
      	 <el-button @click="saveDep" type="primary">确定</el-button>
      	 <el-button @click="dislogHide">取消</el-button>
      </div>
      <div slot="footer" class="dialog-footer" id="editDialog" style="display:none">
      	 <el-button @click="updateDep" type="primary">确定</el-button>
      	 <el-button @click="dislogHide">取消</el-button>
      </div>
   </el-dialog>
</div>
<script th:inline="javascript">
	
	//输入框 placeholder
  	var zPlaceholder = {
  		selects: function (ele) {
  			var selects = document.querySelectorAll(ele); 
		  	for(var i = 0, len = selects.length; i < len; i++ ) {
		  		if(selects[i].__vue__.placeholder) {
		  			selects[i].children[0].children[0].placeholder = selects[i].__vue__.placeholder;
		  		}else {
		  			selects[i].children[0].children[0].placeholder = selects[i].children[0].attributes.placeholder.value;
		  		}

		  	}
  		},
  		inputs: function (ele) {
  			var inputs = document.querySelectorAll(ele); 
		  	for(var j = 0, leng = inputs.length; j < leng; j++ ) {
		  		inputs[j].children[0].placeholder = inputs[j].attributes.placeholder.value;
		  	}
  		}
  	}
  	

	new Vue({

		el: "#app",
		data: {
			 topDepts: [[${topDepts}]],
			 dialogFormVisible: false,
		     showChoice: false,
		     parentOrganizationName: '',
		     organization: {
		    	 uuid: '',
	             createTime: '',
	             name: '',
	             description: '',
	             parentId: ''
		     },
		     openText: '',
		     rules: {
		    	 name: [
	                       {required: true, message: "请输入机构名称", trigger: 'blur'},
	                       {max: 10, message: '机构名称不能超过10个字符', trigger: 'blur'}
	                   ],
	            description: [
		                       {max: 200, message: '描述不能超过200个字符', trigger: 'blur'}
		                   ],
		     },
		},
		methods: {
			saveDep: function () {
	            var self = this;
	            self.$refs['organization-form'].validate((valid) => {
	                if (valid) {
	                    $.ajax({
	                        url: "/backstage/basicdata/organization/add",
	                        type: "POST",
	                        data: JSON.stringify(self.organization),
	                        contentType: "application/json;charset=UTF-8",
	                        dataType: "json",
	                        success: function(data) {
	                            if (data && data.returnCode == "1") {
                                    self.$message({
                                        message: '新增成功',
                                        type: 'success',
                                        customClass: 'message-center',
                                        duration: 1500,
                                        onClose: function () {
                                            window.location.href = '/backstage/basicdata/organization/tolist';
                                        }
                                    });
	                            } else {
	                                self.$message({
	                                        message: '新增失败',
	                                        type: 'success',
	                                        customClass: 'message-center',
	                                        duration: 1500,
	                                        onClose: function () {
	                                            window.location.href = '/backstage/basicdata/organization/tolist';
	                                        }
	                                    });
	                            }
	                        }
	                    });
	                }
	            });
	        },
	        updateDep: function () {
	            var self = this;
	            self.$refs['organization-form'].validate((valid) => {
	                if (valid) {
	                    $.ajax({
	                        url: "/backstage/basicdata/organization/edit",
	                        type: "POST",
	                        data: JSON.stringify(self.organization),
	                        contentType: "application/json;charset=UTF-8",
	                        dataType: "json",
	                        success: function(data) {
	                            if (data && data.returnCode == "1") {
                                    self.$message({
                                        message: '编辑成功',
                                        type: 'success',
                                        customClass: 'message-center',
                                        duration: 1500,
                                        onClose: function () {
                                            window.location.href = '/backstage/basicdata/organization/tolist';
                                        }
                                    });
	                            } else {
                                    self.$message({
                                        message: '编辑失败',
                                        type: 'success',
                                        customClass: 'message-center',
                                        duration: 1500,
                                        onClose: function () {
                                            window.location.href = '/backstage/basicdata/organization/tolist';
                                        }
                                    });
	                            }
	                        }
	                    });
	                }
	            });
	        },
            deleteDept: function(uuid) {
                var self = this;
                self.$confirm('确认要删除机构?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消'
                }).then(() => {
                $.ajax({
                    url: "/backstage/basicdata/organization/delete",
                    type: "POST",
                    data: JSON.stringify([uuid]),
                    contentType: "application/json;charset=UTF-8",
                    dataType: "json",
                    success: function (data) {
                        if (data && data.returnCode == "1") {
                            self.$message({
                                message: '删除成功',
                                type: 'success',
                                customClass: 'message-center',
                                duration: 1500,
                                onClose: function () {
                                    window.location.href = '/backstage/basicdata/organization/tolist';
                                }
                            });
                        } else {
                            self.$message({
                                message: '删除失败',
                                type: 'success',
                                customClass: 'message-center',
                                duration: 1500,
                                onClose: function () {
                                    window.location.href = '/backstage/basicdata/organization/tolist';
                                }
                            });
                        }
                    }
                });
               });
            },
            editDailog: function(row){
            	this.openText = "编辑机构";
    	    	$("#addDialog").css('display','none'); 
    	    	$("#editDialog").css('display','block'); 
            	this.organization.uuid = row.uuid;
            	this.organization.name = row.name;
            	this.parentOrganizationName = row.parentId;
            	this.organization.parentId = row.parentId;
            	this.organization.description = row.description;
            	this.organization.createTime = row.createTime;
    	      	this.dialogFormVisible = true;
            },
            handleNodeClick: function (data) {
                this.parentOrganizationtName = data.name;
                this.organization.parentId = data.uuid;
            },
			change: function (ele) {
		  		console.log(this.valueState);
		  	},
		  	
		  	handleSizeChange: function (val) {
	        	console.log("每页"+val+"条");
		    },
		    
		    handleCurrentChange: function (val) {
		        console.log("当前页: "+ val);
		    },
		    handleCurrentTable: function (val) {
		    	//window.location.href = 'edit.html?no='+val.no;
		    },
		    //编辑、删除
		    handleEdit: function (index, row) {
		        console.log(index, row);
		    },
	     	handleDelete: function (index, row) {
	       	 	console.log(index, row);
	      },
	      dislogHide: function () {
	      	this.dialogFormVisible = false;
	      },
	      showDailog: function (uuid,name) {
	    	this.openText = "新增机构";
	    	$("#addDialog").css('display','block'); 
	    	$("#editDialog").css('display','none'); 
	    	this.organization.parentId = uuid;
	    	this.parentOrganizationName = uuid;
	    	this.organization.name = '';
	    	this.organization.description = '';
	    	this.organization.uuid = '';
	      	this.dialogFormVisible = true;
	      },
	      hideChoice: function () {
	      	this.showChoice = false;
	      }
		},
		mounted: function () {
			var _this = this;
		  	$('.z-tabs_item').click(function () {
		  		$(this).addClass('is_active').siblings().removeClass('is_active');
		  		var inx = $(this).index();
		  		
		  		$('.content_item').eq(inx).addClass('active').siblings().removeClass('active');
		  		
		  		if($('.content_item.active .right_pos table').length > 0) {
	  			var tableH = $('.right_pos').height();
	  			$('.right_table').height(tableH);
	  		}
		  	});
		  	
		  	//placeholder
		  	zPlaceholder.selects('.z_select-holder');
		  	zPlaceholder.inputs('.z_input-holder');
		  	
		  	//	拖拽

		 	var updateOutput = function(e){
		        var list   = e.length ? e : $(e.target),
		            output = list.data('output');
		        if (window.JSON) {
		            output.val(window.JSON.stringify(list.nestable('serialize')));//, null, 2));
		        } else {
		            output.val('JSON browser support required for this demo.');
		        }
		        $('.dragbtn').parent('li').addClass("on");
		       	$('.dd-item.on').each(function (i,v) {
		       		if($(v).children('a').hasClass('dragbtn')) {
		       		}else {
		       			$(v).removeClass('on');
		       		}
		       	});
		       	//拖拽返回值
		       	console.log($('#nestable-output').val());
		    };
		
		    $('#nestable').nestable({
		        group: 1
		    }).on('change', updateOutput);
		    
		    updateOutput($('#nestable').data('output', $('#nestable-output')));
		    
		    $('#nestable').nestable('collapseAll');//折叠所有节点 
		    
		    $('.el-pagination__sizes').find('input').attr('readonly','readonly');
		},
		updated: function () {
			
		},
	});
</script>
</body>
</html>
